<template>
    <div class="learn-examination">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="在线练习" name="practice" disabled>
                <!-- <YearSelector @change="onSelectYear" /> -->
                <PracticePaperList ref="parcticePaperListRef" :paperType="practiceType" />
            </el-tab-pane>
            <el-tab-pane label="模拟试卷" name="mockExam">
                <MockPaperList :paperType="mockType" />
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script setup>
import YearSelector from '../components/YearSelector.vue'
import PracticePaperList from './components/practicePaperList.vue'
import MockPaperList from './components/mockPaperList.vue'

import { EXAM_MODEL } from '@/const/exam'

const activeName = ref('mockExam')

const handleClick = (tab, event) => {
    console.log(tab, event)
}
const parcticePaperListRef = ref(null)
function onSelectYear(year) {
    parcticePaperListRef.value.getPracticeList({ year: year != '全部' ? year : '' })
}

const { proxy } = getCurrentInstance()
const { sys_paper_type } = proxy.useDict("sys_paper_type")

const findTypeValue = (dictValue) => {
    return sys_paper_type.value.find(item => item.dictValue === dictValue)?.value;
}

const practiceType = computed(() => findTypeValue(EXAM_MODEL.PRACTICE));
const mockType = computed(() => findTypeValue(EXAM_MODEL.MOCK));
</script>
<style scoped lang="scss">
.learn-examination {
    padding: 25px 0;

    .demo-tabs {
        height: 100%;

        :deep(.el-tabs__content) {
            height: calc(100% - 40px);
            padding: 51px 42px;

            .el-tab-pane {
                height: 100%;
            }
        }
    }

    .year-tags {
        font-size: 16px;
        margin-bottom: 50px;

        .year-tags-label {
            margin-right: 34px;
            color: #333;
            cursor: pointer;
        }

        .year-tags-item {
            margin-right: 36px;
            color: #666;
            cursor: pointer;

            &.active {
                color: #3872A9;
                font-weight: bold;
            }
        }
    }
}
</style>